<template>
  <div class="content-div">
    <div class="head-box">
      <img :src="userInfo.head_sculpture ? userInfo.head_sculpture : default_head" alt="">
      <span>{{userInfo.nickname}}</span>
    </div>
    <div class="mk-box">
      <div class="mk-item" @click="toPage('/patientList')">
        <img src="@/assets/images/mk-jzr.png" alt="" srcset="">
        <div>
          <span>就诊人</span>
          <span>{{medicalNum}}</span>
        </div>
      </div>
    </div>
    <div class="gn-box">
      <div @click="toPage(item.router)" class="gn-item" v-for="(item, index) in gnList" :key="index">
        <div>
          <img :src="item.img" alt="">
          <span>{{item.name}}</span>
        </div>
        <van-icon color="#999999" name="arrow" />
      </div>
    </div>
  </div>
</template>
<script>
import { selectMedicalVisitorList } from '@/api/medical.js'
export default {
  name: 'index',
  data () {
    return {
      default_head: require('@/assets/images/default-head.jpg'),
      userInfo: {},
      gnList: [
        { name: '我的地址', img: require('@/assets/images/icon-my-address.png'), router: '/addressList' },
        { name: '联系客服', img: require('@/assets/images/icon-lxkf.png'), router: 'callPhone' },
        { name: '关于我们', img: require('@/assets/images/icon-about.png'), router: '/aboutUs' },
        { name: '用户协议', img: require('@/assets/images/icon-yhxy.png'), router: '/policyIn?pageType=1' },
        { name: '隐私政策', img: require('@/assets/images/icon-yszc.png'), router: '/policyIn?pageType=2' },
        { name: '设置', img: require('@/assets/images/icon-sz.png'), router: '/setting' }
      ],
      medicalNum: 0
    }
  },
  created () {},
  methods: {
    toPage (url) {
      if (url == 'callPhone') {
        window.location.href = `tel:${this.userInfo.phone}`
        return
      }
      this.$router.push(url)
    },
    getPersonList () {
      selectMedicalVisitorList({
        member_id: this.$store.state.user.token
      }).then(res => {
        if (res.data.errcode === 0) {
          this.medicalNum = res.data.data.length
        }
      })
    }
  },
  mounted () {
    this.getPersonList()
    this.userInfo = this.$store.state.user.severUserInfo
  }
}
</script>

<style scoped lang="less">
  .content-div{
    font-size: 12px;
    background-color: #FFFFFF;
    min-height: 100%;
    background-image: url('../../../../assets/images/bg.png');
    background-repeat: no-repeat;
    background-size: 100% auto;
    .head-box{
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      align-items: center;
      box-sizing: border-box;
      padding: 10px;
      font-weight: bold;
      img{
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin-right: 10px;
        border: 4px solid #FFFFFF;
      }
    }
    .mk-box{
      width: 300px;
      margin-left: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      .mk-item{
        width: 100%;
        position: relative;
        background-color: #FFFFFF;
        border-radius: 6px;
        display: flex;
        flex-direction: row;
        box-sizing: border-box;
        padding: 10px;
        img{
          width: 34px;
          height: 34px;
          margin-right: 10px;
          vertical-align: middle;
        }
        div{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          height: 34px;
          width: 100%;
          box-sizing: border-box;
          span:first-child{
            font-size: 12px;
          }
          span:last-child{
            font-size: 14px;
            font-weight: bold;
          }
        }
      }
    }
    .gn-box{
      box-sizing: border-box;
      padding: 10px;
      .gn-item{
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 16px;
        border-bottom: 1px solid #E8E8E8;
        box-sizing: border-box;
        padding: 10px 4px;
        div{
          display: flex;
          flex-direction: row;
          justify-content: flex-start;
          align-items: center;
          font-size: 12px;
          img{
            width: 20px;
            height: 20px;
            margin-right: 6px;
          }
        }
      }
    }
  }
</style>
